<template>
  <div class="job-list">
    <div class="job-wrap">
      <van-list v-model="cur_loading" offset="1000" :finished="cur_finished" @load="onLoad" :immediate-check="false">
        <transition-group tag="div" name="list">
          <div class="job-item rippleMagic" :class="[showState && 'showState']" v-for="v in list" :key="'job_'+v.id" @click="jumpTo(v)">
            <div class="job-name">
              <span class="name ellipsis">{{ v.name }}</span>
              <span class="pay">{{ v.payid }}-{{ v.pay_end }}k</span>
            </div>
            <div class="wrap">
              <p>
                <i class="iconfont icon-map"></i>
                <span>{{ v.city_name || '暂无'}}</span>
              </p>
              <p>
                <i class="iconfont icon-edit"></i>
                <span>{{ v.is_all === 0 ? '实习' : '全职' }}</span>
              </p>
              <p>
                <i class="iconfont icon-hat"></i>
                <span>{{ v.eid || '暂无' }}</span>
              </p>
            </div>
            <div class="company">
              <div class="logo"  :style="{
                background: 'url(' + (v.logo || v.company_logo) + ') center center / cover no-repeat',
              }"></div>
              <div class="name">
                <p class="title ellipsis">{{ v.cname || v.company_name}}</p>
                <p class="type ellipsis">{{ v.industry || v.industry_data }}</p>
              </div>
              <div class="btn-box">查看详情</div>
            </div>
            <div class="state-box" v-if="showState">
              <span class="state">{{v.status_cn}}</span>
              <span class="time">{{v.edittime}} {{v.status === 1 ? '投递' : '被查看'}}</span>
            </div>
          </div>
        </transition-group>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    loading: {
      type: Boolean,
      default () {
        return false
      }
    },
    finished: {
      type: Boolean,
      default () {
        return false
      }
    },
    showState: {
      type: Boolean,
      default () {
        return false
      }
    },
  },
  name: 'job',
  data () {
    return {
      cur_loading: this.loading,
      cur_finished: this.finished,
    }
  },
  watch: {
    loading (val) {
      this.cur_loading = val;
    },
    finished(val) {
      this.cur_finished = val;
    },
    cur_loading(val){
      this.$emit('update:loading', val);
    },
    cur_finished(val){
      this.$emit('update:finished', val);
    },
  },
  methods: {
    onLoad() {
      this.$emit('toFetch')
    },
    jumpTo (obj) {
      var id = obj.jid ? obj.jid : obj.id;
      if (!id) {
        this.$alertWarn('未获取到ID，请刷新后再试！')
        return
      }
      let timers = setTimeout(() => {
        this.$router.push({
          path: 'job-detail',
          query: {
            id: id,
          },
        })
        clearTimeout(timers)
        timers = null
      }, 300)
    },
  },
}
</script>

<style lang="stylus" scoped>
.job-list

  .job-wrap
    height 100%

  .van-list
    height 100%

    & > div
      background #f6f7f8

  .job-item
    padding 20px
    min-height 152px
    width 375px
    overflow hidden
    position relative
    margin-bottom 10px
    background #fff

    &.showState
      padding-bottom 0

    &:first-child
      border-top 0

    &:last-child
      margin 0

    .job-name
      display flex
      font-size 18px
      height 30px
      align-items center

      .name
        flex 1
        color #333

      .pay
        flex 0 0 70px
        text-align right
        color $color-danger

    .wrap
      margin 10px 0
      height 22px
      line-height 22px
      display flex

      p
        margin-right 10px
        padding 0 8px
        height 18px
        line-height 18px
        background #f5f5f5
        color #666
        border-radius 3px

        i
          font-size 10px
          margin-right 5px

        span
          font-size 12px

    .company
      display flex
      align-items center

      .logo
        flex 0 0 48px
        height 48px
        width 48px
        font-size 0
        border-radius 50%
        border 1px solid #ebebeb
        background #fff
        overflow hidden

        img
          width 100%

      .name
        margin-left 5px
        flex 0 0 185px
        overflow hidden

        .title
          font-size 12px
          color #333

        .type
          margin-top 5px
          font-size 10px
          color #999

      .btn-box
        margin-top 8px
        flex 0 0 100px
        height 30px
        line-height 28px
        text-align center
        color $color-main
        border-radius 15px
        font-size 12px
        border 1px solid $color-main

    .state-box
      margin-top 10px
      border-top: 1px solid #ebebeb;
      height 40px
      line-height 40px
      display flex
      align-items center
      justify-content space-between

      span
        font-size 12px
        color #999
      .state
        position: relative;
        padding-left: 10px;
        &::before
          content ''
          height 12px
          width 2px
          top 14px
          background $color-main
</style>
